﻿@model MvcCms.Store.Web.ViewModels.DefaultViewModel
@{
    var priceOptions = Model._Product.PricingOptions;
}
<link href="/razorthemes/@Model._Portal.ECommTheme/content/humanity/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.js"></script>
<script type="text/javascript" src="/Areas/mvccmsstore/Scripts/jquery.ui-spinner.1.24/ui.spinner.js"></script>
<script type="text/javascript">
    jQuery().ready(function ($) {
        $('.qSpinner').val(1);
        $('.qSpinner').spinner({ min: 1, max: 100, start: 1 });
        $('a[title]').qtip({
            position: {
                my: 'bottom right',  // Position my top left...
                at: 'top left', // at the bottom right of...
                target: 'mouse' // my target
            },
            style: {
                classes: "ui-tooltip-dark"
            } 
        });
    });
</script>
<h2>@Model._Product.Title</h2>
<div class="product-picture">
<p>
    <img class="product-big" alt="@Model._Product.Title" src="/uploadedimages/@Model._Portal.URLAuthority/@Model._Product.ProductArtUrl" />
</p>
</div>
<div id="product-details">
    <p>
        <em>Category:</em>
        @Model._Product.Category.Name
    </p>
    <p>
        <em>Description:</em>
        @Model._Product.Description
    </p>
    @if (priceOptions.Count == 0)
    {
        var productFormId = "frmProduct_" + Model._Product.ProductID; 
    <p>
        <em>Price:</em>
        @String.Format("{0:F}", Model._Product.Price)
    </p>
    <form id="@productFormId" autocomplete="off" action="/@Model._Portal.URLAuthority/ShoppingCart/AddToCart" method="post">        
    <div class="addtocart-container">             
        <div class="addtocart-button">
        <p class="button">
            @Html.Hidden("ProductID", Model._Product.ProductID)
            <a href="javascript:void(0);" onclick="SubmitFormNormalPrice(@Model._Product.ProductID)">Add to cart</a>          
        </p>        
        </div>
        <div class="addtocart-quantity">
            <input class="qSpinner" id="spinner_product-@Model._Product.ProductID" type="text" value="0" />
        </div>
        <div style="clear:both;"></div>
    </div>
    </form>
    }
    else
    {
        <h2>Price Options</h2>
        foreach (var priceOption in priceOptions)
        {
            var formId = "frmPO_" + priceOption.PriceOptionID; 
        <div class="price-option-form">
        <form id="@formId" autocomplete="off" action="/@Model._Portal.URLAuthority/ShoppingCart/AddToCartWithNotes" method="post">
            <div class="price-option-left">
                <p>
                    <em>@priceOption.Title</em>
                    <em>$@String.Format("{0:F}", priceOption.Price) </em>  
                @if (!string.IsNullOrEmpty(priceOption.Description))
                {
                    <a href="javascript:void(0);" title="@priceOption.Description">more info...</a>
                }
                              
                </p>            
            </div>
            <div class="price-option-right">
                <div class="addtocart-container">             
                    <div class="addtocart-button">
                    <p class="button">                       
                        @Html.Hidden("PriceOptionId", priceOption.PriceOptionID)
                        @Html.Hidden("ProductID", Model._Product.ProductID)
                        <a href="javascript:void(0);" onclick="SubmitForm(@priceOption.RequiresNotes.ToString().ToLower(), @priceOption.PriceOptionID)">Add to cart</a>          
                    </p>
                    </div>
                    <div class="addtocart-quantity">
                        <input class="qSpinner" id="spinner-@priceOption.PriceOptionID" type="text" value="0" />
                    </div>  
                    <div style="clear:both;"></div>  
                </div>                                                                
            </div>
            <div style="clear:both;"></div>
        @if (priceOption.RequiresNotes)
        {                
            <div class="editor-label">
                @priceOption.NotesInstructions
            </div>
            <div class="editor-field">
                @Html.TextArea("orderInstructions_"+priceOption.PriceOptionID, new { @class = "textarea-small" })
            </div>                 
        }    
        </form> 
        </div>                               
        }
    }
</div>
<div style="clear:both;"></div>
<script type="text/javascript">
    function SubmitFormNormalPrice(productId) {
        $("#spinner_product-" + productId).attr("id", "Quantity");
        $("#Quantity").attr("name", "Quantity");
        $("#frmProduct_" + productId).submit();
    }
    function SubmitForm(notesRequired, priceOptionId) {
        if (notesRequired) {
            var notes = $("#orderInstructions_" + priceOptionId).val();
            if (!notes) {
                alert("Order Instructions Are Required For This Order Type");
                $("#orderInstructions_" + priceOptionId).focus();
                return false;
            }
            else {
                $("#orderInstructions_" + priceOptionId).attr("id", "OrderNotes");
                $("#OrderNotes").attr("name", "OrderNotes");               
            }
        }
        $("#spinner-" + priceOptionId).attr("id", "Quantity");
        $("#Quantity").attr("name", "Quantity");
        $("#frmPO_" + priceOptionId).submit();
    }
</script>